<template>
  <div class="support-page">
    <h1>用户支持</h1>
    <!-- 常见问题 -->
    <section class="faq">
      <h2>常见问题解答 (FAQ)</h2>
      <ul>
        <FAQItem question="如何更新我的应用程序？" answer="你可以从应用商店下载最新版本。" />
        <FAQItem question="为什么应用崩溃了？" answer="如果遇到崩溃，请尝试重新启动应用，或者联系技术支持。" />
      </ul>
    </section>

    <!-- 联系我们 -->
    <section class="contact-us">
      <h2>联系我们</h2>
      <p>如有任何问题，请通过以下方式联系我们：</p>
      <ul>
        <li>Email: <a href="450537144@qq.com">450537144@qq.com</a></li>
        <li>电话: +86 188-0126-3882</li>
      </ul>
      <ContactForm />
    </section>
  </div>
</template>

<script>
import FAQItem from "./components/FAQItem.vue";
import ContactForm from "./components/ContactForm.vue";

export default {
  name: "SupportPage",
  components: {
    FAQItem,
    ContactForm,
  },
};
</script>

<style scoped>
.support-page {
  max-width: 800px;
  margin: 0 auto;
  @apply p-4;
}

section {
  margin-bottom: 20px;
}

h1,
h2 {
  color: #007bff;
}

ul {
  list-style-type: none;
  padding-left: 0;
}

a {
  color: #007bff;
  text-decoration: none;
}
</style>
